<template>
  <div class="app-container">
    <!-- 查询表单-->
    <!--element-ui的 date-picker组件默认绑定的时间值是默认世界标准时间，和中国时间差8小时
          设置 value-format="yyyy-MM-dd HH:mm:ss" 改变绑定的值-->
    <div id="content">
      <i class="el-icon-menu">筛选</i>
      <p />
      <el-form
        :inline="true"
        :model="selectLogData"
        class="demo-form-inline"
      > 
        <el-form-item label="操作人">
          <el-select  filterable placeholder="请选择" v-model="selectLogData.systemLogBean.operUser">
            <el-option
              v-for="item in operationEmplList"
              :key="item.userId"
              :label="item.username"
              :value="item.username">
            </el-option>
          </el-select>
        </el-form-item>
        
        <el-form-item label="操作类型">
        <el-select  filterable placeholder="请选择" v-model="selectLogData.systemLogBean.operType">
          <el-option
            v-for="item in type"
            :key="item.value"
            :label="item.value"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="操作结果">
        <el-select  filterable placeholder="请选择" v-model="selectLogData.systemLogBean.result">
          <el-option
            v-for="item in result"
            :key="item.value"
            :label="item.value"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      

        <el-form-item label="上传时间">
          <el-date-picker
            v-model="selectLogData.systemLogBean.beginTime"
            type="datetime"
            placeholder="选择开始日期"
            value-format="yyyy-MM-dd HH:mm:ss"
            default-time="00:00:00"
          />
        </el-form-item>-
        <el-form-item>
          <el-date-picker
            v-model="selectLogData.systemLogBean.endTime"
            type="datetime"
            placeholder="选择结束日期"
            value-format="yyyy-MM-dd HH:mm:ss"
            default-time="00:00:00"
          />
        </el-form-item>

        <el-button
          type="primary"
          icon="el-icon-search"
          @click="getListByAny()"
          style="margin-left: 50px"
          >筛选</el-button
        >
        <el-button type="default" @click="resetData()">清空筛选条件</el-button>
      </el-form>
      <p />
      <el-row>
        <el-col
          ><div class="grid-content bg-purple">
            <i class="el-icon-menu">日志列表</i>
          </div></el-col
        >
        <el-col><div class="grid-content bg-purple-light"></div></el-col>

        
      </el-row>
      <p />
      <!--表格-->
      <el-table
        v-loading="listLoading"
        :data="list"
        @selection-change="handleSelectionChange()"
        element-loading-text="数据加载中"
        border
        fit
        stripe
        highlight-current-row
        style="width: 100%"
      >
        <!--数据展示-->
        <el-table-column prop="operUser" label="操作人" width="120">
        </el-table-column>
        
        <el-table-column prop="active" label="日志行为" width="307" />
        <el-table-column prop="operType" label="操作类型" width="110" />
        <el-table-column prop="result" label="操作结果" width="110" />
        <el-table-column prop="operTime" label="操作时间" width="255" />
       </el-table>

      <!-- 分页 -->
      <el-pagination
        :current-page="page"
        :page-size="limit"
        :total="total"
        background
        style="padding: 30px 0; text-align: center"
        layout="total, prev, pager, next, jumper"
        @current-change="getList"
      />
    </div>
  </div>
</template>
<script>
//引入调用slideShow.js文件
import operationLogShow from "@/api/setting";

export default {
  //写核心代码位置
  // data:{
  // },
  data() {
    //定义变量和初始值
    return {
      operationEmplList: null,     
      LogData:{
         operUser:"",
         active:"",
         operType:"",
         result:"",
         operTime:""
      },
      value: "",
      listLoading: true, // 是否显示loading信息
      list: null, //查询之后接口返回集合
      page: 1, //当前页
      limit: 10, //每页记录数
      total: 0, //总记录数
      selectLogData: {
        page: 1,
        limit: 10,
        systemLogBean: {
          operUser: "",
          operType: "",
          result: "",
          beginTime: "",
          endTime: ""
        },
      },
      type:[
        {value: "ADD"},{value: "UPDATE"},{value: "DELETE"}
      ],
      result:[
        {value: "SUCCESS"},{value: "FAIL"},{value: "EXCEPTION"}
      ]
      
    };
  },
  created() {
    //页面渲染之前执行，一般调用methods定义的方法
    //调用
    this.getList();
    this.getemplName();
  },
  mounted() {
    this.listLoading = false;
  },
  methods: {
    //创建具体的方法，调用slideShow.js定义的方法
    //获取轮播图列表的方法,默认是第一页
    getList(page = 1) {
      this.page = page;
      this.selectLogData.page = this.page;
      operationLogShow
        .getLogListPage(this.selectLogData)
        .then((response) => {
          //请求成功
          //response接口返回的数据
          this.list = response.data.list;
          this.total = response.data.total;
        });
    },
    getemplName(){
        operationLogShow
        .getEmplNamePage(1,10)
        .then((response) => {
          //请求成功
          //response接口返回的数据
          this.operationEmplList = response.object.list;
          console.log(operationEmplList);
        });
    },
    
    getListByAny(page = 1) {
      this.page = page;
      this.selectLogData.page = this.page;
      this.selectLogData.limit = this.limit;
        operationLogShow
        .getLogListPage(this.selectLogData)
        .then((response) => {
          //请求成功
          //response接口返回的数据
          console.log(response);
          this.list = response.data.list;
          this.total = response.data.total;
        });
    },
        // 多选框选中数据
    handleSelectionChange(selection) {
      //获取所有选中项的gh(工号)属性的值
      this.checkList = selection.map((item) => item.id);
      console.log(this.checkList);
    },
    resetData() {
      //清空的方法
      //表单输入项数据清空
      this.selectLogData.systemLogBean = {};
      //查询所有讲师数据
      this.getList();
      this.$message({
        type: "success",
        message: "清空成功!",
      });
    },
  },
};
</script>
<style>
#content {
  width: 80%;
  margin: 0 auto;
}
.el-row .el-col-24 {
  width: 150px;
}
.el-col-24:nth-child(3),
.el-col-24:nth-child(4) {
  float: right;
}
</style>